<style>
* {
  margin: 0;
  padding: 0;
}
li {
  list-style: none;
}
.el-head a {
  text-decoration: none;
  color: #000;
}
.el-head {
  background-color: #fff;
  display: flex;
  text-align: center;
  width: 100%;
  line-height: 70px;
}
.el-menu-item {
  font-size: 14px;
}
.el-menu--horizontal > .el-menu-item.is-active {
  border-bottom: 5px solid #409eff;
  color: #303133;
  font-weight: 900;
}
.logo-img {
  display: inline-block;
  width: 40px;
  height: 40px;
  vertical-align: middle;
}
.el-footer {
  width: 100%;
  background-color: #000;
  padding-top: 35px;
  padding-bottom: 143px;
  color: #fff;
}
.footerBox {
  width: 50%;
  margin: 0 auto;
  padding-top: 77px;
  padding: 50px;
  border-bottom: 2px dotted #fff;
}
.footerBox .left {
  padding: 20px 0 20px 0;
  text-align: left;
  font-size: 12px;
  border-right: 2px dotted #fff;
}
.footerBox .left ul {
  padding-right: 40px;
}
.footerBox .left li {
  margin-bottom: 20px;
}
.footerBox .right {
  padding: 0 0 0 20px;
  text-align: left;
  font-size: 12px;
  display: flex;
  justify-content: space-around;
}
.footerBox .right dl dt {
  margin-bottom: 20px;
}
.footerBox .right dl dd {
  margin-bottom: 15px;
}
.footerBox .img-ewm {
  width: 150px;
  height: 150px;
  background-color: #fff;
}
.el-footer .last {
  margin: 0 auto;
  width: 30%;
  font-size: 12px;
  margin-top: 40px;
  display: flex;
}
/* pc端的尾部 */
.pc-footer {
  display: none;
  margin-top:30px ;
}
/* 根据媒体查询控制显示 */
@media (min-width: 750px) {
  .pc-footer {
    display: block;
  }
}
.yd-footer {
  background-image: url("../../public/img/icons/切图 20.png");
  margin-top:30px;
}
/* 移动端的尾部组件 */
.yd-footer-box {
  width: 375px;
  height: 575px;
  background-color: rgba(0, 0, 0, 0.8);

  /* box-shadow:  9px 4px 8px 8px rgba(255, 0, 0, 1); */
  color: #fff;
  padding: 20px;
  box-sizing: border-box;
}
@media (min-width: 750px) {
  .yd-footer-box {
    display: none;
  }
}
.yd-footer-box h1 {
  font-weight: 900;
  text-align: left;
  font-size: 20px;
}
.footer-list {
  margin-top: 20px;
  font-size: 10px;
  text-align: left;
}
.footer-list > div {
  margin-bottom: 5px;
}
/* 尾部产品服务 关于我们 新闻资讯*/
.footer-product,
.footer-about,
.footer-news {
  margin-top: 30px;
  text-align: left;
}
.footer-product-title,
.footer-about-title,
.footer-news-title {
  font-weight: 600;
  padding: 15px 0;
}
.footer-product-list,
.footer-about-list,
.footer-news-list {
  display: flex;
  font-size: 12px;
}
.footer-product-list li,
.footer-about-list li,
.footer-news-list li {
  margin-right: 20px;
}
.footer-product-list li:last-child {
  margin-right: 0;
}
.footer-about-list li:last-child {
  margin-right: 0;
}
.footer-news-list li:last-child {
  margin-right: 0;
}
.el-head {
  display: none;
}
/* 根据媒体查询控制显示 */
@media (min-width: 750px) {
  .el-head {
    display: block;
  }
}

/* 根据媒体查询控制显示 */
@media (min-width: 400px) {
  .el-head-yd {
    display: none;
  }
}
.footer-ewm{
  background-color: #fff;
  width:120px;
  height: 120px;
  margin: 10px auto;
}
</style>
<template>
  <div>
 
    <!-- pc端头部 -->
    <el-row :span="24" class="el-head">
      <el-col :span="9">
        <img
          src="../../public/img/icons/android-chrome-192x192.png"
          alt=""
          class="logo-img"
        />
      </el-col>
      <el-col :span="10">
        <el-menu
          :default-active="activeIndex"
          class="el-menu-demo"
          mode="horizontal"
          @select="handleSelect"
        >
          <el-menu-item index="1">
            <router-link to="/index">首页</router-link>
          </el-menu-item>
          <el-menu-item index="2">
            <router-link to="/about">关于我们</router-link>
          </el-menu-item>
          <el-menu-item index="3">
            <router-link to="/product">产品与方案</router-link>
          </el-menu-item>
          <el-menu-item index="4">
            <router-link to="/news">新闻资讯</router-link>
          </el-menu-item>
          <el-menu-item index="5">
            <router-link to="/addWe">加入我们</router-link>
          </el-menu-item>
        </el-menu>
      </el-col>
    </el-row>
    <!-- 移动端头部 -->
    <div
      class="el-head-yd"
      style="position: relative; width: 375px; z-index: 99"
    >
      <div class="logo-router">
        <div>
          <div
            style="position: absolute; right: 20px; top: 20px"
            slot="dropdown"
          >
            <span
              class="el-dropdown-link"
              @click="toggleDropdown"
              slot="dropdown"
            >
              <!-- 添加点击事件 -->
              <img
                src="../../public/img/icons/android-chrome-192x192.png"
                alt=""
                style="height: 30px; width: 30px; border-radius: 50%"
              />
            </span>
            <el-dropdown-menu
              v-show="isDropdownVisible"
              style="width: 375px; position: fixed; margin-top: -2px"
              >
              <el-dropdown-item>
                <router-link to="/index" >首页</router-link>
              </el-dropdown-item>
              <el-dropdown-item>
                <router-link to="/about"  >关于我们</router-link>
              </el-dropdown-item>
              <el-dropdown-item >
                <router-link to="/product">产品与方案</router-link>
              </el-dropdown-item>
              <el-dropdown-item >
                <router-link to="/news">新闻资讯</router-link>
              </el-dropdown-item>
              <el-dropdown-item @click="toggleUp">
                <router-link to="/addWe">加入我们</router-link>
              </el-dropdown-item>
            </el-dropdown-menu>
          </div>
        </div>
      </div>
    </div>
    <router-view />
    <!-- pc端 尾部-->
    <div class="pc-footer">
      <el-row class="el-footer">
        <el-row class="footerBox">
          <el-col class="left" :span="8">
            <ul>
              <li>地址：<span>北京朝阳阿萨德阿萨德</span></li>
              <li>电话：<span>010-88888888</span></li>
              <li>邮箱：<span>123456@qq.com</span></li>
            </ul>
          </el-col>
          <el-col class="right" :span="16">
            <dl>
              <dt>产品与服务</dt>
              <dd>产品服务</dd>
              <dd>产品服务</dd>
              <dd>产品服务</dd>
              <dd>产品服务</dd>
              <dd>产品服务</dd>
            </dl>
            <dl>
              <dt>产品与服务</dt>
              <dd>产品服务</dd>
              <dd>产品服务</dd>
              <dd>产品服务</dd>
            </dl>
            <dl>
              <dt>产品与服务</dt>
              <dd>产品服务</dd>
              <dd>产品服务</dd>
              <dd>产品服务</dd>
              <dd>产品服务</dd>
              <dd>产品服务</dd>
            </dl>
            <div>
              <img src="" alt="" class="img-ewm" />
            </div>
          </el-col>
        </el-row>
        <el-row class="last">
          <el-col :span="8">© 2000-2024 tohmm.cn 版权所有</el-col>
          <el-col :span="8">京ICP备000001号</el-col>
          <el-col :span="8">京公网安备000000001号</el-col>
        </el-row>
      </el-row>
    </div>
    <!-- 移动端 尾部-->
    <div class="yd-footer">
      <div class="yd-footer-box">
        <h1>yotpo.</h1>
        <!-- 详细信息 -->
        <div class="footer-list">
          <div>
            地址:
            <span>北京市建设路1号建设路1号建设路1号建设路1号</span>
          </div>
          <div>
            电话:
            <span>135624634643453</span>
          </div>
          <div>
            商务合作:
            <span>marketing@tohmm.cn</span>
          </div>
        </div>
        <!-- 产品与服务 -->
        <div class="footer-product">
          <div class="footer-product-title">产品与服务</div>
          <ul class="footer-product-list">
            <li>产品名称</li>
            <li>产品名称</li>
            <li>产品名称</li>
            <li>产品名称</li>
            <li>产品名称</li>
          </ul>
        </div>
        <!-- 关于我们 -->
        <div class="footer-about">
          <div class="footer-about-title">关于我们</div>
          <ul class="footer-about-list">
            <li>产品名称</li>
            <li>产品名称</li>
            <li>产品名称</li>
          </ul>
        </div>
        <!-- 新闻咨询 -->
        <div class="footer-news">
          <div class="footer-news-title">新闻咨询</div>
          <ul class="footer-news-list">
            <li>产品名称</li>
            <li>产品名称</li>
            <li>产品名称</li>
          </ul>
        </div>
        <!-- 二维码 -->
        <div class="footer-ewm">
          <div>
            <img src="" alt="" />
          </div>
          <!-- 工作许可 -->
          <div></div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: "1",
      activeIndex2: "1",
      isDropdownVisible: false, // 新增属性，控制下拉菜单的显示隐藏
    };
  },
  methods: {
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
    },
    handleSelect(key, keyPath) {
      console.log(key, keyPath);
      this.isDropdownVisible = false;
    },
    toggleDropdown() {
      // 新增方法，用于切换下拉菜单的显示隐藏
      this.isDropdownVisible = !this.isDropdownVisible;
      console.log(this.isDropdownVisible)
    },
    toggleUp(){
      console.log('点击了')
      this.isDropdownVisible = !this.isDropdownVisible;
      console.log(this.isDropdownVisible)
    }
  },
};
</script>